<template>
  <div style="width: 1300px; margin: 0 auto; padding: 20px; background-color: #f6f8f9">
    <div style="display: flex">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 930px;
          height: 290px;
          background-color: white;
          cursor: pointer;
        "
      >
        <div
          v-if="
            isEdit && !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 1).length
          "
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 1px solid black;
          "
          @click="$emit('addPortlet', { parentId: layoutId, parentSection: 1 })"
        >
          <span style="font-size: 84px">1</span>
        </div>
        <component
          :is="item.com"
          v-for="(item, index) in portletList.filter(
            (m) => m.params.parentId === layoutId && m.params.parentSection === 1
          )"
          :key="index"
        ></component>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 330px;
          height: 290px;
          background-color: white;
          cursor: pointer;
        "
      >
        <div
          v-if="
            isEdit && !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 2).length
          "
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            border: 1px solid black;
          "
          @click="$emit('addPortlet', { parentId: layoutId, parentSection: 2 })"
        >
          <span style="font-size: 84px">2</span>
        </div>
        <component
          :is="item.com"
          v-for="(item, index) in portletList.filter(
            (m) => m.params.parentId === layoutId && m.params.parentSection === 2
          )"
          :key="index"
        ></component>
      </div>
    </div>

    <a-row :gutter="16" style="margin-top: 20px">
      <a-col v-for="coi in 3" :key="coi" :span="8">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 500px;
            background-color: white;
            cursor: pointer;
          "
        >
          <div
            v-if="
              isEdit &&
              !portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === coi + 2).length
            "
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              border: 1px solid black;
            "
            @click="$emit('addPortlet', { parentId: layoutId, parentSection: coi + 2 })"
          >
            <span style="font-size: 84px">{{ coi + 2 }}</span>
          </div>
          <component
            :is="item.com"
            v-for="(item, index) in portletList.filter(
              (m) => m.params.parentId === layoutId && m.params.parentSection === coi + 2
            )"
            :key="index"
          ></component>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: {
    portletList: { type: Array, default: () => [] },
    isEdit: { type: Boolean, default: true },
    layoutId: { type: Number, default: null },
  },
}
</script>
